<template>
  <div class="w-full h-[100vh] bg-white p-4">
    <el-form inline>
      <el-form-item label="发货人">
        <el-input
          v-model="form.sendName"
          placeholder="请输入发货人名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="发货人电话">
        <el-input
          v-model="form.sendPhone"
          placeholder="请输入发货人电话"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="收货人">
        <el-input
          v-model="form.receiveName"
          placeholder="请输入收货人名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="收货人电话">
        <el-input
          v-model="form.receivePhone"
          placeholder="请输入收货人电话"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList(1)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row style="margin-bottom: 10px">
      <el-button type="danger" @click="orderDelete"
        >删除</el-button
      >
      <el-button type="success" @click="orderCheck"
        >核销</el-button
      >
    </el-row>

    <el-table
      :header-cell-style="headerCellStyle"
      :data="tableData"
      border
      height="500"
      max-height="700"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="状态" prop="status" width="80"></el-table-column>
      <el-table-column label="发货信息">
        <el-table-column
          label="发货人"
          prop="sendUser.name"
          width="160"
        ></el-table-column>
        <el-table-column
          label="发货省市区"
          prop="sendUser.city"
          width="160"
        ></el-table-column>
        <el-table-column
          label="发货详细地址"
          prop="sendUser.address"
          width="160"
        ></el-table-column>
        <el-table-column
          label="发货联系人"
          prop="sendUser.phone"
          width="160"
        ></el-table-column>
        <el-table-column
          label="发货公司名称"
          prop="sendUser.unitName"
          width="160"
        ></el-table-column>
        <el-table-column
          label="发货公司省市区"
          prop="sendUser.unitCity"
          width="160"
        ></el-table-column>
        <el-table-column
          label="发货公司地址"
          prop="sendUser.unitAddress"
          width="160"
        ></el-table-column>
        <el-table-column
          label="发货公司联系电话"
          prop="sendUser.unitPhone"
          width="160"
        ></el-table-column>
      </el-table-column>
      <el-table-column label="收货信息">
        <el-table-column
          label="收货人"
          prop="resivceUser.username"
          width="160"
        ></el-table-column>
        <el-table-column
          label="收货人省市区"
          prop="resivceUser.city"
          width="160"
        ></el-table-column>
        <el-table-column
          label="收货详细地址"
          prop="resivceUser.address"
          width="160"
        ></el-table-column>
        <el-table-column
          label="收货人联系电话"
          prop="resivceUser.phone"
          width="160"
        ></el-table-column>
        <el-table-column
          label="收货公司"
          prop="resivceUser.unitName"
          width="160"
        ></el-table-column>
        <el-table-column
          label="收货公司省市区"
          prop="resivceUser.unitCity"
          width="160"
        ></el-table-column>
        <el-table-column
          label="收货公司地址"
          prop="resivceUser.unitAddress"
          width="160"
        ></el-table-column>
        <el-table-column
          label="收货公司联系电话"
          prop="resivceUser.unitPhone"
          width="160"
        ></el-table-column>
      </el-table-column>
      <el-table-column label="货物信息">
        <el-table-column
          label="货物名称"
          prop="cargo.cargoName"
          width="160"
        ></el-table-column>
        <el-table-column
          label="包装件数"
          prop="cargo.totalPackages"
          width="90"
        ></el-table-column>
        <el-table-column
          label="重量(KG)"
          prop="cargo.weight"
          width="90"
        ></el-table-column>
        <el-table-column
          label="体积(m³)"
          prop="cargo.volume"
          width="90"
        ></el-table-column>
        <el-table-column
          label="送货方式"
          prop="cargo.pickupWay"
          width="120"
        ></el-table-column>
        <el-table-column
          label="收货方式"
          prop="cargo.goodMode"
          width="120"
        ></el-table-column>
        <el-table-column
          label="报价金额(元)"
          prop="cargo.insuranceValue"
          width="120"
        ></el-table-column>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="searchList()"
      @current-change="searchList()"
      :current-page.sync="current"
      :page-sizes="[100, 200, 300, 400]"
      :page-size.sync="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    >
    </el-pagination>
  </div>
</template>

<script>
import { getAdminOrderList, orderRemoveAll, orderCheck } from "@/api/order";
import { ElMessage } from "element-plus";
export default {
  data: () => {
    return {
      current: 1,
      size: 10,
      total: 0,
      loading: false,
      tableData: [],
      ids: [],
      headerCellStyle: {
        backgroundColor: "#f5f7fa",
        color: "#333",
      },
      form: {
        sendName: "",
        sendPhone: "",
        receiveName: "",
        receivePhone: "",
      },
    };
  },
  methods: {
    // 查询
    async searchList(page) {
      this.loading = true;
      page && (this.current = page);

      const { result } = await getAdminOrderList({
        ...this.form,
        current: this.current,
        size: this.size,
      });
      this.tableData = result.content;
      this.total = +result.page.totalElements;
      this.loading = false;
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((v) => v.id);
    },
    async orderDelete() {
      if (!this.ids.length) return;
      await this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      const { success } = await orderRemoveAll(this.ids.join(','));
      if (success) {
        ElMessage.success("删除成功！");
        this.searchList();
      }
    },
    async orderCheck() {
      if (!this.ids.length) return;
      await this.$confirm("此操作将核销该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      const { success } = await orderCheck(this.ids.join(','));
      if (success) {
        ElMessage.success("核销成功！");
        this.searchList();
      }
    },
  },
};
</script>
